<template>
    <div class="app-container">
        <aside>
            The guide page is useful for some people who entered the project for the first time. You can briefly
            introduce the
            features of the project. Demo is based on
            <a href="https://github.com/kamranahmedse/driver.js" target="_blank">driver.js.</a>
        </aside>
        <el-button icon="el-icon-question" type="primary" @click.prevent.stop="guide">
            Show Guide
        </el-button>
    </div>
</template>

<script>
    import Driver from 'driver.js' // import driver.js
    import 'driver.js/dist/driver.min.css' // import driver.js css
    import steps from './steps'

    export default {
        name: 'Guide',
        data() {
            return {
                driver: null
            }
        },
        mounted() {
            this.driver = new Driver()
        },
        methods: {
            guide() {
                this.driver.defineSteps(steps)
                this.driver.start()
            }
        }
    }
</script>
